<template>
	<view class="shippingAddress">
		<scroll-view @scroll="handeScroll" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
				:refresher-triggered="data.refresherBool" :refresher-enabled="true" scroll-y="true">
			<view @touchstart="touchstart" class="shippingAddressList">
				<view @tap="handeClick(item)" @longpress="longpress(item,index)" class="listItem" v-for="(item,index) in data.result.list"
					:key="index">
					<!-- <view class="left" v-if="item.defaultFlag == 'DEFAULT'">
						<image src="/static/img/index/49.png" mode="widthFix"></image>
					</view> -->
					<view class="text">
						<view class="bot">
							<text>{{item.rcvName}}</text>
							<text>{{item.rcvPhone}}</text>
							<text v-show="item.defaultFlag == 'DEFAULT'">默认</text>
						</view>
						<view class="top">
							<text>{{item.address}}</text>
						</view>
						
					</view>
					<image  @tap.stop="navTo(item.id)" src="/static/img/index/125.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<view class="bottom" @tap="navTo('')">
			添加地址
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryUserAddressList,deleteUserAddressById,setAddressInfo } from '@/utils/api/address'
	const data = reactive<any>({
		obj: { pageNo: 1, pageSize: 10 },
		result: { list: [] },
		isAddress:false
	})
	const navTo = (id) => {
		uni.navigateTo({
			url: '/pages/operateAddress/index?id=' + id
		})
	}
	uni.$off('shippingAddress')
	uni.$on('shippingAddress',(obj)=>{
		if(obj){
			data.result.list.map((item)=>{
				if(obj.defaultFlag == 'DEFAULT'){
					item.defaultFlag = ''
				}
				if(item.id == obj.id){
					for(var i in item){
						item[i] = obj[i]
					}
				}
			}) 
			return;
		}
		data.obj.pageNo = 1;
		requstList(1)
	})
	onLoad(({isAddress})=>{
		if(isAddress){
			data.isAddress = true;
		}
	})
	const handeClick=(e)=>{
		if(data.isAddress){
			uni.$emit('confirmOrderAddress',e)
			uni.navigateBack()
		}
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	const handeScroll=()=>{
		data.bool = false;
	}
	const touchstart=()=>{
		data.bool = true;
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
	const requstList = (i = 0) => {
		if(!i){
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
		}
		
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		queryUserAddressList({ data: data.obj }).then((res) => {
			res.data.list = [...data.result.list, ...res.data.list]
			data.result = res.data;
			data.refresherBool = false;
			if(!i){
				uni.hideLoading()
			}
		})
	}
	const longpress = (item,index) => {
		if(data.bool){
			uni.showActionSheet({
				itemList: ['删除', '设为默认'],
				success: (e) => {
					uni.showLoading({
						title:'加载中...',
						mask:true
					})
					if(e.tapIndex == 0){
						deleteUserAddressById({data:{id:item.id}}).then((res)=>{
							if(res.code == 200){
								uni.showToast({
									title:'删除成功!',
									icon:'none'
								})
								data.result.list.splice(index,1)
								if(item.defaultFlag == 'DEFAULT'){
									
								}
							}
						})
					}else{
						setAddressInfo({data:{id:item.id}}).then((res)=>{
							if(res.code == 200){
								uni.showToast({
									title:'设置成功!',
									icon:'none'
								})
								data.result.list.map((item)=>{
									item.defaultFlag = ''
								})
								item.defaultFlag = 'DEFAULT'
							}
						})
					} 
				}
			})
		}
		
	}
	requstList()
</script>

<style lang="scss">
	.shippingAddress {
		height: 100vh;
		padding: 20rpx 30rpx 10rpx 30rpx;
		display: flex;
		flex-direction: column;

		scroll-view {
			overflow: auto;
			flex: 1;
		}

		.shippingAddressList {
			.listItem {
				padding: 25rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F0F0F0;

				.left {
					image {
						width: 32rpx;
						margin-right: 24rpx;
					}
				}

				.text {
					flex: 1;
					width: 0;

					.top {
						display: flex;
						align-items: center;

						text:nth-of-type(1) {
							flex: 1;
						}
					}

					.bot {
						display: flex;
						margin-top: 10rpx;

						text {
							font-size: 24rpx;
							color: #8C8C8C;
						}

						text:nth-of-type(1) {
							margin-right: 24rpx;
						}

						text:nth-of-type(2) {}
						text:nth-of-type(3) {
							width: 50rpx;
							height: 30rpx;
							line-height: 30rpx;
							text-align: center;
							border-radius: 6rpx;
							background: #6B64D3;
							color: #fff;
							font-size: 20rpx;
							margin-left: 16rpx;
						}
					}
				}

				>image {
					width: 36rpx;
					margin-left: 25rpx;
				}
			}
		}

		.bottom {
			line-height: 96rpx;
			text-align: center;
			border-radius: 80rpx;
			color: #fff;
			margin-top: 30rpx;
			font-size: 36rpx;
			background: #6B64D3;
		}
	}
</style>